<template>
    <div class="products_customization">
        <Header/>
        <div class="second_show">
            <div class="img"></div>
            <div class="pages_w1470">
                <div class="second_show_text products_1" v-if="menudatalist">
                    <div class="second-title">
                        <p class="en">{{menudata.son[1].alias}}</p>
                        <p class="cn">{{menudata.son[1].name}}</p>
                    </div>
                    <div class="text" v-html="menudata.son[1].content"></div>
                </div>
            </div>
            <i class="tips"></i>
        </div>

        <div class="second_box" v-if="menudatalist">
            <img src="../assets/images/s3.png" class="strengths-r1">
            <div class="pages_w1470 pa-tb-5">
                <div class="second-title opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].son[0].alias}}</p>
                    <p class="cn">{{menudatalist[1].son[0].name}}</p>
                </div>

                <ul class="ul advantages_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li v-for="(item,index) in menudatalist[1].son[0].data" :key="index" class="scale"><div class="box"><img :src="$store.state.domain+item.pic"></div></li>
                </ul>

            </div>
        </div>

        <div class="second_box dosage-bj"  v-if="menudatalist">
            <img src="../assets/images/dosage-jt.png" class="dosage-jt">
            <div class="pages_w1470 pa-tb-5">
                <div class="second-title align-r opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].son[1].alias}}</p>
                    <p class="cn">{{menudatalist[1].son[1].name}}</p>
                </div>

                <ul class="ul dosage_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li v-for="(item,index) in menudatalist[1].son[1].data" :key="index">
                        <div class="box scale">
                            <div class="img"><img :src="$store.state.domain+item.pic"></div>
                            <p class="title">{{item.name}}</p>
                        </div>
                    </li>
                </ul>

                <div class="second-title pa-tb-5 opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].son[2].alias}}</p>
                    <p class="cn">{{menudatalist[1].son[2].name}}</p>
                </div>
                <div class="private-img fl-clr opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <div class="img"><img :src="$store.state.domain+menudatalist[1].son[2].pic"></div>
                    <div class="private-txt fl-clr">
                      <ul class="ul private-txt-ul fl-clr pc">
                        <nav v-for="(item,index) in menudatalist[1].son[2].data" :key="index" >
                          <li v-if="index<3" :class="classname('l',parseInt(index)+1)">
                              <div class="box">
                                  <div class="title">{{item.name}}</div>
                                  <div class="txt" v-html="item.info">
                                  </div>
                              </div>
                          </li>
                          <li v-else-if="index>2" :class="classname('l',9-index)">
                              <div class="box">
                                  <div class="title">{{item.name}}</div>
                                  <div class="txt" v-html="item.info">
                                  </div>
                              </div>
                          </li>
                        </nav>
                      </ul>

                      <ul class="ul private-txt-ul fl-clr web">
                        <nav v-for="(item,index) in gresolve(menudatalist[1].son[2].data,3)" :key="index" >
                          <li  :class="classname('l',parseInt(index)+1)">
                              <div class="box">
                                  <div class="title">{{item.name}}</div>
                                  <div class="txt" v-html="item.info">
                                  </div>
                              </div>
                          </li>
                        </nav>
                      </ul>

                    </div>
                </div>
            </div>
        </div>


        <div class="second_box"  v-if="menudatalist">
            <div class="pages_w1470 pa-tb-5">
                <div class="second-title opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].son[3].alias}}</p>
                    <p class="cn">{{menudatalist[1].son[3].name}}</p>
                </div>
                <div class="pc">
					<ul class="ul process_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
						<li  v-for="(item,index) in menudatalist[1].son[3].data" :key="index"  >
							<div class="box scale">
								<div class="img"><i :class="classname('number p',parseInt(index)+1)"></i><i class="imga"><img :src="$store.state.domain+item.pic"></i></div>
								<p class="title">{{item.name}}</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="web">
					<ul class="ul process_list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
						<li  v-for="(item,index) in menudatalist[1].son[3].data" :key="index"  :class="('li'+index)">
							<div class="box scale">
								<div class="img"><i :class="classname('number p',parseInt(index)+1)"></i><i class="imga"><img :src="$store.state.domain+item.pic"></i></div>
								<p class="title">{{item.name}}</p>
							</div>
						</li>
					</ul>
				</div>

                <a href="javascript:;" class="customized_bnt opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}"><span><p>有定制需求</p><p>请联系我们</p></span></a>
            </div>
        </div>
        <div class="second_box customized_hide" data-customized="show"  v-if="menudatalist">
            <img src="../assets/images/customized_hide.png" class="customized-l1">
            <div class="customized_show">
               <div class="tip">感谢输入您的联系方式，以便我们能尽快与您取得联系！</div>
               <div class="box">
                 <form action="http://ketuo.xlhd.cn/Message/index.json" method="post">
                     <ul class="ul customized_form fl-clr">
                           <li>
                               <div class="pa">
                                   <div class="title">怎么称呼您* </div>
                                   <div class="txt"><label><input name="mr" checked  type="radio" value="先生">先生</label><label><input name="mr" type="radio" value="女士">女士</label></div>
                               </div>
                           </li>
                           <li>
                               <div class="pa">
                                   <div class="title">您现在和科拓有合作往来吗* </div>
                                   <div class="txt"><label><input name="company" checked  type="radio" value="0">没有</label><label><input name="company" type="radio" value="1">有</label></div>
                               </div>
                           </li>
                           <li>
                               <div class="pa">
                                   <div class="title">姓名* </div>
                                   <div class="txt"><input name="name" type="text" class="text"></div>
                               </div>
                           </li>
                           <li>
                               <div class="pa">
                                   <div class="title">感兴趣的领域* </div>
                                   <div class="txt"><input name="lingyu" type="text" class="text"></div>
                               </div>
                           </li>
                           <li>
                               <div class="pa">
                                   <div class="title">您的电话* </div>
                                   <div class="txt"><input name="tel" type="text" class="text"></div>
                               </div>
                           </li>
                           <li>
                               <div class="pa">
                                   <div class="title">您的电子邮箱* </div>
                                   <div class="txt"><input name="mail" type="text" class="text"></div>
                               </div>
                           </li>
                           <li class="wa">
                               <div class="pa">
                                   <div class="title">留言</div>
                                   <div class="txt"><textarea name="message" cols="" rows="" class="textarea"></textarea></div>
                               </div>
                           </li>
                     </ul>
                     <input name="" type="submit" class="bnt" value="提交">
                   </form>
               </div>
            </div>
        </div>

        <Footer/>
    </div>
</template>





<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {
    components: {
        Footer,Header
    },
    methods: {
        classname(pre,index){
            return pre+parseInt(index);
        },
        gresolve(datas,gstart){
            let garray = [];
            let gtemp  = [];
            for(var i=0;i<Object.keys(datas).length;i++){
                if(i<gstart){
                  garray.push(datas[i]);
                }else{
                  gtemp.push(datas[i]);
                }
            }
            gtemp.reverse();
            return garray.concat(gtemp);

        }
    },
    computed: {
        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(6)).length>100){
                return this.$store.getters.getmenudata(6)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(6)).length>100){
                return this.$store.getters.getmenudatalist(6)
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        }
    },
    mounted () {
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
        $('body').on('click','.customized_bnt',function(){
            if($(this).hasClass('open')){
                $(this).removeClass('open');
                $('[data-customized="show"]').slideUp()
            }else{
                $(this).addClass('open');
                $('[data-customized="show"]').slideDown()
            }
        })
    }
}
</script>
